<!DOCTYPE html>  
<html lang="en">  

<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>会员注册</title>  

    <style>  
        div {  
            width: 400px;  
            margin: 10px auto;  
            text-align: left;  
        }  
        label {  
            display: inline-block;  
            width: 80px;  
            text-align: right;  
        }  
        span {  
            color: red;  
        }  
        .footer {  
            margin-left: -4px;  
        }  
        .tip {  
            color: red;  
            font-size: 14px;  
        }  
    </style>   

    

</head>  

<body>  
    <h3><span style="color:blue;">欢迎注册会员</span></h3>  
    <div id="login">  
        <form action="data.html" method="get">  
            <div>  
                <label for="username">用户名</label>  
                <input type="text" id="username" name="username" placeholder="12位学号" required />  
                <span>必填</span>  
            </div>  
            <div>  
                <label for="pwd">创建密码</label>  
                <input type="password" id="pwd" name="pwd" placeholder="支持大小写以及特殊字符" required />  
                <span>必填</span>  
            </div>  
            <div>  
                <label for="email">注册邮箱</label>  
                <input type="email" id="email" name="email" placeholder="例如636372733@qq.com" required />  
                <span>必填</span>  
            </div>  
            <div>  
                <label for="captcha"> 验证码</label>  
                <input type="text" id="verificode" name="verificode" />
            <canvas id="canvas" width="100" height="40" onclick="dj()" style="border: 1px solid #ccc;
             border-radius: 5px;"></canvas>

            </div>  

            

            <div>  
                性别：  
                <label>  
                    <input type="radio" name="sex" value="male" checked="checked"> 男  
                </label>  
                <label>  
                    <input type="radio" name="sex" value="female"> 女  
                </label>  
            </div>  

            <div>  
                <label for="birthday">生日</label>  
                <input type="date" id="birthday" name="birthday" />  
            </div>  
            <div>  
                <label for="age">年龄</label>  
                <input type="number" id="age" name="age" min="0" />  
            </div>  

            <div>  
                <label for="province">籍贯:</label>  
                <select id="province" name="province" onchange="updateCities()">  
                    <option value="">请选择省份</option>  
                    <option value="beijing">北京</option>  
                    <option value="shanghai">上海</option>  
                    <option value="guangdong">广东</option>  
                    <option value="jiangsu">江苏</option>  
                    <option value="zhejiang">浙江</option>  
                </select>  
            
                <label for="city">选择城市:</label>  
                <select id="city" name="city">  
                    <option value="">请选择城市</option>  
                </select>   
            </div>  

            <div>  
                学历：  
                <select name="degree">  
                    <option value="0">小学</option>  
                    <option value="1">初中</option>  
                    <option value="2">高中</option>  
                    <option value="3">专科</option>  
                    <option value="4" selected="selected">本科</option>  
                    <option value="5">硕士研究生</option>  
                    <option value="6">博士研究生</option>  
                </select>  
            </div>  

            <div>  
                月薪  
                <input type="range" id="score" name="score" min="2000" max="10000" step="200" value="6000">  
                <span id="msg"></span>  
            </div>  

            <script>  
                var msg = document.getElementById("msg");   
                window.onload = function () {   
                    msg.innerHTML = document.getElementById("score").value;   
                }  
                document.getElementById("score").oninput = function () {   
                    msg.innerHTML = this.value;   
                }  
            </script>  

            <div>  
                爱好：  
                <label>  
                    <input type="checkbox" name="like" value="singing">唱歌  
                </label>  
                <label>  
                    <input type="checkbox" name="like" value="running">跑步  
                </label>  
                <label>  
                    <input type="checkbox" name="like" value="swimming">游泳  
                </label>  
            </div>  

            <div>  
                <p>图片预览：</p>  
                <div id="test-image-preview" style="border: 1px solid silver; width: 100%; height: 200px; background-repeat: no-repeat;   
                background-position: center;"></div>  
                <input type="file" id="test-image-file" name="test">  
                <p id="test-file-info">没有选择文件</p>  
            </div>  

            <script>
                var fileInput = document.getElementById('test-image-file');
                var info = document.getElementById('test-file-info');
                var preview = document.getElementById('test-image-preview'); 
                fileInput.addEventListener('change', function () { // 监听change事件
                 preview.style.backgroundImage = ''; // 清除背景图片 
                 if (!fileInput.value) {
                info.innerHTML = '没有选择文件';
                return;
                } 
                var file = fileInput.files[0]; // 获取File引用
                 // 获取File信息:
                info.innerHTML = '文件: ' + file.name + '<br>' + '大小: ' + file.size + '<br>' + '修改: ' + file.lastModifiedDate;
                if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
                alert('不是有效的图片文件!');
                return;
                } 
                var reader = new FileReader(); // 读取文件
                 reader.onload = function (e) { // 发起一个异步操作来读取文件内容
                var data = e.target.result; // data串形如： '...(base64编码)...' 
                preview.style.backgroundImage = 'url(' + data + ')';
                }; 
                reader.readAsDataURL(file); // 以DataURL的形式读取文件
                 });
                  //验证码
      var show_num=[];
      draw(show_num);

      function dj(){
        draw(show_num);
      }

      function draw(show_num) {
        var canvas_width = document.getElementById('canvas').clientWidth;
        var canvas_height = document.getElementById('canvas').clientHeight;
        var canvas = document.getElementById("canvas"); //获取到canvas的对象，演员
        var context = canvas.getContext("2d"); //获取到canvas画图的环境，演员表演的舞台
        canvas.width = canvas_width;
        canvas.height = canvas_height;
        var sCode =
            "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";
        var aCode = sCode.split(",");
        var aLength = aCode.length; //获取到数组的长度
 
        for (var i = 0; i <= 3; i++) {
            var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
            var deg = Math.random() * 30 * Math.PI / 180; //产生0~30之间的随机弧度
            var txt = aCode[j]; //得到随机的一个内容
            show_num[i] = txt;
            var x = 10 + i * 20; //文字在canvas上的x坐标
            var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
            context.font = "bold 23px 微软雅黑";
 
            context.translate(x, y);
            context.rotate(deg);
 
            context.fillStyle = randomColor();
            context.fillText(txt, 0, 0);
 
            context.rotate(-deg);
            context.translate(-x, -y);
        }
        for (var i = 0; i <= 5; i++) { //验证码上显示线条
            context.strokeStyle = randomColor();
            context.beginPath();
            context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.stroke();
        }
        for (var i = 0; i <= 30; i++) { //验证码上显示小点
            context.strokeStyle = randomColor();
            context.beginPath();
            var x = Math.random() * canvas_width;
            var y = Math.random() * canvas_height;
            context.moveTo(x, y);
            context.lineTo(x + 1, y + 1);
            context.stroke();
        }
    }
 
    function randomColor() { //得到随机的颜色值
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
    }

            </script>

<form> 
    简历：<br>
    <textarea name="intro" cols="50" rows="10" placeholder="请填写个人简历"></textarea> 
</form>            

                <div class="footer">
                    <input type="submit" value="提交" />
                    <input type="reset" value="重填" />
                    <input type="button" value="确定" onclick="foo()">
                    <input type="date" name="mydate">
                </div>
                <div class="tip">
                </div>
            </form>
    </div>
</body>

</html>